import React from 'react';
import { observer } from 'mobx-react';
import { View, Text, ScrollView, TextInput, FlatList } from 'react-native';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Feather';
import _ from 'lodash';
import CustomerItem from './customerItem';
import styles from './styles';
import Separtor from "../../../components/separtor";

@observer
class Result extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      keyword: ''
    };
  }
  onSearch = () => {
    const { keyword } = this.state;
    const kw = _.trim(keyword);
    if (kw) {
      this.props.store.search(keyword).then(list => {
        this.setState({
          list
        });
      });
    }
  };
  onChange = keyword => {
    this.setState({
      keyword
    });
  };
  renderItem = ({ item }) => {
    const { customerId } = item;
    const onPress = () => {
      Actions.customerDetail({ customerId });
    };
    return <CustomerItem data={item} onPress={onPress} />;
  };
  render() {
    return (
      <View style={styles.wrap}>
        <View style={styles.searchBar}>
          <Icon
            name="search"
            size={24}
            color="#069"
            style={styles.searchIcon}
          />
          <TextInput
            returnKeyType="search"
            onChangeText={this.onChange}
            onSubmitEditing={this.onSearch}
            placeholder="请输入客户的姓名或者手机号查询"
            style={styles.textInput}
          />
        </View>
        <ScrollView style={styles.result}>
          <FlatList
            ListHeaderComponent={
              this.state.keyword ? <Text>关键字：{this.state.keyword} 查询出 {this.state.list.length}个结果</Text> : null
            }
            data={this.state.list}
            renderItem={this.renderItem}
            keyExtractor={item => item.customerId.toString()}
            ItemSeparatorComponent={Separtor}
            ListEmptyComponent={<Text>没有结果</Text>}
          />
        </ScrollView>
      </View>
    );
  }
}

export default Result;
